<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>申し込み内容のご入力</title>
    <link rel="stylesheet" href="/css/all.css">
</head>

<body>
    <!-- 页面头部导航 -->
    <div class="header">
        <div>
            <a href="#">カードサイト</a>
            <a href="#">お手続き</a>
            <a href="#">お問い合わせ</a>
            <a href="#">会員ログイン</a>
        </div>
    </div>

    <hr>
    <!-- 页面主标题 -->
    <div class="title-bar container0">申し込み内容のご入力</div>
    <div class="container">
        <hr>

        <!-- 表单开始：提交到 /apply/step2 的 POST 请求 -->
        <form action="/apply/xinxi3" method="post" th:object="${app}">

            <!-- 勤务信息填写部分 -->
            <div class="section-title"><strong>勤務先について</strong></div>
            <div class="form-container">

                <!-- 选择行业类型 -->
                <div class="form-group">
                    <div class="label">業種<span><img src="/images/icon_required.png" alt=""></span></div>
                    <div class="input-group">
                        <select name="gyocd" class="input-field" required th:field="*{gyocd}">
                            <option value="101" th:selected="${app.gyocd == '101'}">選択してください</option>
                            <option value="201" th:selected="${app.gyocd == '201'}">農林水産</option>
                            <option value="301" th:selected="${app.gyocd == '301'}">製造業</option>
                            <option value="401" th:selected="${app.gyocd == '401'}">サービス業</option>
                            <option value="501" th:selected="${app.gyocd == '501'}">金融業</option>
                            <option value="601" th:selected="${app.gyocd == '601'}">建設業</option>
                            <option value="901" th:selected="${app.gyocd == '901'}">教育業</option>
                        </select>
                        <div th:if="${#fields.hasErrors('gyocd')}" style="color: red; font-size: 14px; margin-top: 5px;">
                            <span th:errors="*{gyocd}"></span>
                        </div>
                    </div>
                </div>

                <!-- 公司名称输入 -->
                <div class="form-group">
                    <div class="label">勤務先名</div>
                    <div class="input-group">
                        <input type="text" class="input-field" name="kms" placeholder="例:株式会社 H"  th:field="*{kms}">
                        <div th:if="${#fields.hasErrors('kms')}" style="color: red; font-size: 14px; margin-top: 5px;">
                            <span th:errors="*{kms}"></span>
                        </div>
                    </div>
                </div>

                <!-- 所属部门输入 -->
                <div class="form-group">
                    <div class="label">勤務先部署名</div>
                    <div class="input-group">
                        <input type="text" class="input-field" name="kmsdep" placeholder="例:第一事業部" th:field="*{kmsdep}">
                        <div th:if="${#fields.hasErrors('kmsdep')}" style="color: red; font-size: 14px; margin-top: 5px;">
                            <span th:errors="*{kmsdep}"></span>
                        </div>
                    </div>
                </div>

                <!-- 公司电话号码输入 -->
                <div class="form-group">
                    <div class="label">勤務先電話</div>
                    <div class="input-group">
                        <input type="tel" class="input-field" name="kmstel" placeholder="例:03-1111-2222" th:field="*{kmstel}">
                        <div th:if="${#fields.hasErrors('kmstel')}" style="color: red; font-size: 14px; margin-top: 5px;">
                            <span th:errors="*{kmstel}"></span>
                        </div>
                    </div>
                </div>

                <!-- 公司地址分两行输入 -->
                <div class="form-group">
                    <div class="label">勤務先住所</div>
                    <div class="input-group">
                        <input type="text" class="input-field" name="kmsjs1" placeholder="例:東京都品川区東品川1-1-1"  th:field="*{kmsjs1}">
                        <div th:if="${#fields.hasErrors('kmsjs1')}" style="color: red; font-size: 14px; margin-top: 5px;">
                            <span th:errors="*{kmsjs1}"></span>
                        </div>
                    </div>
                    <div class="input-group">
                        <input type="text" class="input-field" name="kmsjs2" placeholder="例:東品川ビル 101室"  th:field="*{kmsjs2}">
                        <div th:if="${#fields.hasErrors('kmsjs2')}" style="color: red; font-size: 14px; margin-top: 5px;">
                            <span th:errors="*{kmsjs2}"></span>
                        </div>
                    </div>
                </div>

                <!-- 入职年月输入 -->
                <div class="form-group">
                    <div class="label">入社年月</div>
                    <div class="input-group">
                        <input type="text" class="input-field" name="nshym" placeholder="例:201810"  th:field="*{nshym}">
                        <div th:if="${#fields.hasErrors('nshym')}" style="color: red; font-size: 14px; margin-top: 5px;">
                            <span th:errors="*{nshym}"></span>
                        </div>
                    </div>
                </div>

                <!-- 年收入输入 -->
                <div class="form-group">
                    <div class="label">年収額</div>
                    <div class="input-group">
                        <input type="number" class="input-field" name="nsg" placeholder="例:320"  th:field="*{nsg}">
                        <span style="margin-left: 5px;">万円</span>
                        <div th:if="${#fields.hasErrors('nsg')}" style="color: red; font-size: 14px; margin-top: 5px;">
                            <span th:errors="*{nsg}"></span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 提交与返回按钮 -->
            <div style="text-align: center; margin-top: 20px;">
                <button type="button" class="button-back" onclick="window.history.back()">戻る</button>
                <button type="submit" class="button-next">次へ進む</button>
            </div>

        </form>

        <!-- 版权声明信息 -->
        <div class="container">
            <p style="text-align: center;">Copyright © H · All Rights Reserved ·</p>
        </div>

    </div>

</body>

</html>
